import QtQuick 1.0
import "../js/plurker.js" as DataModel

Item {
  id: plurk

  property variant plurkDetailModel: plurkDetailModel
  property variant plurkModel: plurkModel
  property variant plurkView: plurkView
  property int currentPlurk
  property int toolbarHeight
  property int modelIndex
  property int fontSize: 12
  property alias screen: plurkView.screen

  signal showPlurkResponse(int plurk_id, int index)

  width: parent.width
  height: parent.height

  ListModel {
    id: plurkDetailModel
  }

  ListModel {
    id: plurkModel
  }

  Component {
    id: plurkDelegate
    Item {
      id: plurkitem
      opacity: 1
       width: parent.width
      height: plurk_text.height > plurk_avatar.height ? plurk_text.height + plurker.height + 20 : plurk_avatar.height + plurker.height + 20
      Rectangle {
        smooth: true
        color: "#999999"
        width: parent.width
        height: parent.height
        Rectangle {
          smooth: true
          color: plurkMouseArea.pressed ? "#aaaaaa" : "#000000"
          width: parent.width
          height: parent.height - 1
          Image {
            id: plurk_avatar
            x: parent.x
            y: parent.y + 4
            source: avatar
            width: 48
            height: 48
          }
          Text {
            id: plurk_text
            x: parent.x + plurk_avatar.width + 5
            y: parent.y + 4
            width: parent.width - plurk_avatar.width - 5
            font.pixelSize: fontSize
            color: "#ffffff"
            text: "<span>" + plurk_data +"</span>"
            wrapMode: Text.WordWrap
          }
          Rectangle {
            id: plurk_info
            x: parent.x + 16 + 5
            y: plurkitem.height - plurker.height - 5
            width: parent.width - x
            Text {
              id: plurker
              x: parent.x
              color: "#ffffff"
              text: "<span>" + plurk_name + "</span>"
              font.pixelSize: fontSize
            }
            /*
            Text {
              id: plurk_date
              x: plurker.x + plurker.width
              color: "#ffffff"
              text: "<span>" + posted + "</span>"
              font.pixelSize: fontSize
            }
            */
            Text {
                id: plurk_response
                x: parent.width - plurk_response.width
                color: is_unread == 1 ? "#ff0000" : "#ffffff"
                horizontalAlignment: Text.AlignRight
                text: "<span>" + response + "</span>"
                font.pixelSize: fontSize
                visible: typeof(response) != 'undefined'
            }
            Image {
                id: discuss
                x: parent.width - plurk_response.width - width
                source: "qrc:discuss.png"
                visible: typeof(response) != 'undefined'
            }
          }
          Rectangle {
            id: plurk_state
            y: plurkitem.height - private_image.height - 5
            Image {
              id: private_image
              source: "qrc:locking.png"
              visible: plurk_private != null
            }
          }
        }
      }
      MouseArea {
        id: plurkMouseArea
        anchors.fill: parent
        onClicked: {
          if (plurk.screen == "response") return;
          currentPlurk = plurk_id;
          /*
          plurkDetailModel.clear();
          plurkDetailModel.append(plurkModel.get(index));
          plurk.GetResponses(plurk_id);
          plurkView.state = "hidden"
          */
          modelIndex = index;
          plurk.showPlurkResponse(plurk_id, index);
        }
      }
    }
  }

  Rectangle {
    id: plurkView
    x: 0
    y: 0
    width: parent.width
    height: parent.height
    opacity: 1
    color: "#000000"
    property string screen: "plurk"

    Rectangle {
      id: plurkAll
      color: "#000000"
      width: parent.width
      height: parent.height
      ListView {
        opacity: 1
        id: plurkList
        model: plurkModel
        delegate: plurkDelegate
        anchors.fill: parent
        anchors.topMargin: 0
        anchors.bottomMargin: toolbarHeight
      }
    }

    Rectangle {
      id: plurkDetail
      color: "#000000"
      x: parent.width
      width: parent.width
      height: parent.height
      ListView {
        opacity: 1
        id: plurkDetailList
        model: plurkDetailModel
        delegate: plurkDelegate
        anchors.fill: parent
        anchors.topMargin: 0
        anchors.bottomMargin: toolbarHeight
      }
    }

    states: [
      State {
        name: "hidden"
        PropertyChanges {
          target: plurkAll
          x: 0 - plurkAll.width
        }
        PropertyChanges {
          target: plurkDetail
          x: 0
        }
        StateChangeScript { script: plurk.screen = "response" }
      },
      State {
        name: "visible"
        PropertyChanges {
          target: plurkAll
          x: 0
        }
        PropertyChanges {
          target: plurkDetail
          x: plurkDetail.width
        }
        StateChangeScript { script: plurk.screen = "plurk" }
      }
    ]
    transitions: Transition {
      SequentialAnimation {
        ParallelAnimation {
          NumberAnimation { target: plurkAll; property: "x"; duration: 600; easing.type: "InOutCubic" }
          NumberAnimation { target: plurkDetail; property: "x"; duration: 600; easing.type: "InOutCubic" }
        }
      }
    }
  }
}
